<template>
	<div>
		<el-form :inline="true">
			<el-form-item label="报告日期" prop="reportDate" label-width="100px">
				<ReportDatePicker v-model="searchForm.reportDate" />
			</el-form-item>
			<el-form-item>
				<el-button @click="getList">搜索</el-button>
			</el-form-item>
		</el-form>

		<el-table
			ref="multipleTable"
			:data="tableData"
			tooltip-effect="dark"
			style="width: 100%"
			border
			stripe
			@selection-change="handleSelectionChange"
		>
			<el-table-column align="center" fixed="left" type="selection" width="55"> </el-table-column>
			<el-table-column prop="name" label="名称" align="center"></el-table-column>
		</el-table>
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			layout="total, sizes, prev, pager, next, jumper"
			:page-sizes="[10, 20, 50, 100]"
			:current-page="current"
			:page-size="size"
			:total="total"
		>
		</el-pagination>
	</div>
</template>

<script>
import ReportDatePicker from '@/components/reportDatePicker/Index.vue';
import { Message, MessageBox } from 'element-ui';
import {formatServerDate} from '@/utils/date';
import dayjs from 'dayjs';
export default {
	name: 'StructureList',
	components: {
		ReportDatePicker,
	},
	props: {
		type: {
			type: String,
			default: '1',
		}
	},
	data() {
		return {
			searchForm: {
				type: this.type,
            },
			delBtlStatu: true,
			tableData: [],
			total: 0,
			size: 10,
			current: 1,
			addUpdateVisible: false,
		};
	},
	created() {
		//this.getList();
	},
	methods: {
		toggleSelection(rows) {
			if (rows) {
				rows.forEach((row) => {
					this.$refs.multipleTable.toggleRowSelection(row);
				});
			} else {
				this.$refs.multipleTable.clearSelection();
			}
		},
		handleSelectionChange(val) {
			console.log('勾选');
			console.log(val);
			this.multipleSelection = val;

			this.delBtlStatu = val.length == 0;
		},

		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size = val;
			this.getList();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.current = val;
			this.getList();
		},
		getList() {
            const {reportDate,  ...formData} = this.searchForm;
			if(!reportDate){
				Message({
					message: '报告时间不能为空',
					type: 'warn',
					duration: 5 * 1000,
				});
				return;
			}
			this.$axios
				.get('/admin/boat/data/yellowTypeList', {
					params: {
                        reportDate: reportDate ? dayjs(reportDate).format('YYYY-MM') : null,
                        ...formData,
					},
				})
				.then((res) => {
                    const result = res.result;
					this.tableData = result.map((item) => {
                        const {create_time, update_time,gmt_verify, ...rest} = item;

                        return {
                            create_time: formatServerDate(create_time),
                            update_time: formatServerDate(update_time),
                            gmt_quotation: formatServerDate(gmt_verify, 'YYYY-MM-DD'),
                            ...rest,
                        }
                    });
					this.size = result.size;
					this.current = result.current;
					this.total = result.total;
				}).catch((e) => {
                    console.log(e);
                });
		},
		delHandle(id) {
			var ids = [];

			if (id) {
				ids.push(id);
			} else {
				this.multipleSelection.forEach((row) => {
					ids.push(row.id);
				});
			}

			this.$axios.get('/admin/boat/province/delByIds', {params:{ids: ids.join(',')}}).then((res) => {
				this.$message({
					showClose: true,
					message: '恭喜你，操作成功',
					type: 'success',
					onClose: () => {
						this.getList();
					},
				});
			});
		},
		addUpdateButton(id) {
			this.addUpdateVisible = true;
			this.$nextTick(() => {
				this.$refs.addUpdate.init(id);
			});
		},
	},
};
</script>

<style scoped>
.el-button {
	padding: 0 10px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
	margin-right: 10px;
}
</style>
